<template>
	<view class="pb100">
		<!-- 顶部占位 -->
		<view class="topbg">
			<view class="header-bar"></view>
		</view>
		<!-- //顶部占位 -->
		
		<!-- 搜索区域 -->
		<view class="topbox pl30 pr30">
			<view class="h88 fs32 flex col-center">水暖阀门采购指南</view>
			<!-- <search :searchQuery="likeQuery"/> -->
			<view class="search h80">
				<view class="searchbox flex pr20 pl80">
					<view class="searchIcon flex col-center flex1">
						<image src="/static/image/index/search.png" class="w24 h24 mr10"></image>
					</view>
					<u-input v-model="searchName" type="text" :border="false" :custom-style='customStyle'
						placeholder="请输入内容" trim :clearable='false' placeholder-style='color: #FFFFFF;' class="w-max" />
					<view class="flex row-right" @click="searchBtn">
						<text class="w70">搜索</text>
					</view>
				</view>
			</view>
		</view>
		<!-- //搜索区域 -->

		<!-- 轮播图 -->
		<view class="">
			<u-swiper :list="list" height=380 @click='btnSwiper' borderRadius="0"></u-swiper>
		</view>
		<!-- //轮播图 -->
		<view class="pl20 pr35">
			<notice></notice>
		</view>
		<!-- 分割线 -->
		<view class="fengeline"></view>
		<view class="pt30">
			<!-- 宫格导航 -->
			<view class="flex row-between mb30 pl48 pr48">
				<view v-for="(item,i6) in gridList" :key='i6' class="flex row-column col-center" @click="gotonav(item)">
					<image :src="item.image" class="w60 h60"></image>
					<text class="mt10">{{item.txt}}</text>
				</view>
			</view>
			<!-- //宫格导航 -->


		</view>

		<!-- banner图片盒子 -->
		<!-- text -->
		<view class="">
			<!-- 大图盒子 -->
			<view class="flex flex-wrap" v-if="picList1.length">
				<block v-for="(item1,i1) in picList1" :key='item1.id'>
					<image :src="item1.pic" class="w-max" @click="picBtn1(item1)" mode="widthFix"></image>
				</block>
			</view>
			<!-- //大图盒子 -->
		</view>
		<!-- //banner图片盒子 -->

		<!-- 广告图片盒子 -->
		<view class="mt10">
			<!-- 第二行视频盒子 -->
			<view class="flex flex-wrap" v-if="picList2.length">
				<block v-for="(item2,i2) in picList2" :key='item2.id' v-if="!selshow">
					<video :src="item2.video" controls class="w-max" :show-fullscreen-btn='true'></video>
				</block>
			</view>
			<!-- //第二行视频盒子 -->

			<!-- 第三行 -->
			<view class="flex w-max mt10 flex-wrap" v-if="picList3.length>0">
				<block v-for="(item3,i3) in picList3" :key='item3.id'>
					<image :src="item3.pic" class="mr20 w365 picList3" @click="picBtn1(item3)" mode="widthFix"
						style="display: inline-block;"></image>
				</block>
			</view>
			<!-- 第三行 -->

			<!-- 第四行 -->
			<view class=" flex mt10 flex-wrap" v-if="picList4.length">
				<block v-for="(item4,i4) in picList4" :key='i4'>
					<image :src="item4.pic" class="picList4" mode="widthFix" @click="picBtn1(item4)"></image>
				</block>
				<!-- <image :src="picList4[0].pic" class="w210 h210 mr20" mode="widthFix" @click="pic4Btn1"></image> -->
				<!-- <image :src="picList4[1].pic" class="flex1 h210" v-if="picList4[1].pic" mode="widthFix" @click="pic4Btn2"></image> -->
			</view>
			<!-- 第四行 -->

			<!-- 第五行 -->
			<view class="flex mt10 flex-wrap" v-if="picList5.length">
				<block v-for="(item5,i5) in picList5" :key='item5.id'>
					<image :src="item5.pic" class="picList5 w365 mr20" @click="picBtn1(item5)" mode="widthFix"></image>
				</block>
			</view>
			<!-- 第五行 -->

			<!-- 第六行 -->
			<view class="flex w-max row-between flex-wrap mt10" v-if="picList6.length">
				<block v-for="(item6,i6) in picList6" :key='item6.id'>
					<image :src="item6.pic" class="mt20 fourimagebox " @click="picBtn1(item6)" mode="widthFix"></image>
				</block>
			</view>

			<!-- //第五行 -->
		</view>
		<!-- //广告图片盒子 -->

		<!-- 精选商品 -->
		<view class="pl30 pr30 bg-f">
			<view class="flex row-between col-center">
				<view class="flex col-center">
					<view class="w10 h60 biaoshi mr30" style="position: relative;">
						<u-icon name="play-right-fill"
							style="position: absolute; top: 50%; left: -3rpx; transform: translateY(-50%);"
							color="#F66F58"></u-icon>
					</view>
					<text class="fs30 fw">精选商品</text>
				</view>
				<view class="flex col-center" @click="$jump('/subpkg/goods/goods')">
					<text class="color9">更多</text>
					<u-icon name="arrow-right" size="12" color="#999999"></u-icon>
				</view>
			</view>
			<goodsList :goodslist="goodsList" />
		</view>
		<!-- //精选商品 -->

		<!-- 选择搜索弹层 -->
		<view class="selbox">
			<u-select v-model="selshow" :list="sellist" @confirm="confirm"></u-select>
		</view>
		<!-- //提示填写手机号的弹层 -->
		<u-popup v-model="showtell" mode='center' width="600" height="400" border-radius="10" :mask-close-able='false'>
			<view class="flex pl30 pr30 h300 row-column col-center row-center">
				<view class="flex row-center col-center">
					<view class="mr20">手机号:</view>
					<u-input v-model="mobile" type="text" :border="true" placeholder="请绑定手机号" trim class="w350" />
				</view>
				<view class="flex mt30 row-center col-center">
					<view class="mr40">密码:</view>
					<u-input v-model="loginpass" type="password" :border="true" placeholder="请输入密码" trim class="w350" />
				</view>
			</view>

			<view class="flex row-center">
				<u-button type="primary" size="medium" @click="mobileBtn">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import notice from '@/components/notice/index.vue'
	import goodsList from '@/components/goodsList/goodsList.vue'
	export default {
		name: 'home',
		components: {
			notice,
			goodsList
		},
		onShow() {
			this.getInit()
			this.getShop()
			//获取精选商品列表
			this.getLikegoods()
		},
		data() {
			return {
				//
				selshow: false,
				sellist: [{
						value: 1,
						label: '搜索商品'
					},
					{
						value: 2,
						label: '搜索店铺'
					}
				],
				// 搜索的内容
				searchName: '',
				customStyle: {
					color: '#fff',
				},
				//手机提示框
				showtell: false,
				//手机号
				mobile: "",
				//绑定密码
				loginpass: '',
				list: [],
				gridList: [{
					image: '/static/image/index/tuoyuan.png',
					txt: '新品发布',
					url: '/subpkg/Newrelease/Newrelease',
					data: 0,
				}, {
					image: '/static/image/index/requ(7).png',
					txt: '产品中心',
					url: '/subpkg/goods/goods',
					data: 0,
				}, {
					image: '/static/image/index/requ1.png',
					txt: '入驻申请',
					url: '/subpkg/settledApply/settledApply',
					data: 0,
				}, {
					image: '/static/image/index/requ(2).png',
					txt: '品牌列表',
					url: '/subpkg/brandList/brandList',
					data: 0,
				}],
				picList1: [],
				picList2: [],
				picList3: [],
				picList4: [],
				picList5: [],
				picList6: [],
				//精选商品分类
				likeQuery: {
					page: 1,
					size: 10
				},
				//存储精选商品分类列表
				goodsList: [],
				surplus: 1
			};
		},
		methods: {
			//点击搜索
			searchBtn() {
				this.selshow = true
			},
			confirm(e) {
				console.log(e);
				if (e[0].value == 1) {
					if (this.searchName == '') {
						this.$msg('搜索内容不能为空')
						return
					}
					this.$api.searchIndex({
						name: this.searchName
					}).then(res => {
						if (res.code == 1) {
							uni.setStorageSync('searchList', res.data)
							uni.navigateTo({
								url: '/subpkg/Newrelease/Newrelease?type=1&tit=搜索结果'
							})
						}

					})
				} else {
					if (this.searchName == '') {
						this.$msg('搜索内容不能为空')
						return
					}
					uni.navigateTo({
						url: '/subpkg/brandList/brandList?name=' + this.searchName
					})
				}
			},
			//精选商品分类列表
			getLikegoods(e) {
				this.$api.isLikeGoods(this.likeQuery).then(res => {
					console.log('like', res)
					this.goodsList = [...this.goodsList, ...res.data]
					if (res.data.length == 0) {
						this.surplus = 0
					}
				})
			},
			//获取店铺详情
			getShop() {
				this.$api.getShop().then(res => {
					console.log(res)
					if (res.data.data == 1) {
						this.gridList[2].data = res.data.data
					}
					uni.setStorageSync('shopDetail', res.data.shop)
				})
			},
			//获取首页数据
			getInit() {
				this.$api.userData().then(res => {
					console.log(res)
					if (res.data.mobile == 0) {
						this.showtell = true
					}
					uni.setStorageSync('userinfo', res.data)
				})
				this.$api.index().then(res => {
					// console.log(res)
					this.list = res.data.map((item, i) => {
						item.image = item.pic
						return item
					})
				})
				this.$api.config().then(res => {
					// console.log(res)
					uni.setStorageSync('config', res.data)
				})
				//获取首页广告图片
				this.$api.advertisement().then(res => {
					if (res.data['1']) {
						this.picList1 = res.data['1']
					}
					if (res.data['2']) {
						this.picList2 = res.data['2']
					}
					if (res.data['3']) {
						this.picList3 = res.data['3']
					}
					if (res.data['4']) {
						this.picList4 = res.data['4']
					}
					if (res.data['5']) {
						this.picList5 = res.data['5']
					}
					if (res.data['6']) {
						this.picList6 = res.data['6']
					}
				})
			},
			//点击宫格导航
			gotonav(item) {
				if (item.data == 0) {
					uni.navigateTo({
						url: item.url
					})
				} else {
					this.$msg('您已申请过店铺')
				}
			},
			//点击轮播图
			btnSwiper(e) {
				console.log(e)
				//==1表示可跳转
				if (this.list[e].url_switch == 1) {
					if (this.list[e].url_type == 'goods_detail') {
						let spu = this.list[e].params.spu
						uni.navigateTo({
							url: '/subpkg/goodsDetail/goodsDetail?spu=' + spu
						})
					} else if (this.list[e].url_type == 'shop_detail') {
						let id = this.list[e].params.id
						uni.navigateTo({
							url: '/subpkg/brandDetail/brandDetail?shop_id=' + id
						})
					} else if (this.list[e].url_type == 'goods_list') {
						let category_id = this.list[e].params.category_id.category_id
						uni.navigateTo({
							url: '/subpkg/goodsSecondLevel/goodsSecondLevel?id=' + category_id
						})
					}
				}
			},
			//点击广告图片
			picBtn1(item) {
				console.log(item)
				if (item.url_switch == 1) {
					if (item.url_type == 'goods_detail') {
						let spu = item.params.spu
						uni.navigateTo({
							url: '/subpkg/goodsDetail/goodsDetail?spu=' + spu
						})
					} else if (item.url_type == 'shop_detail') {
						let id = item.params.id
						uni.navigateTo({
							url: '/subpkg/brandDetail/brandDetail?shop_id=' + id
						})
					} else if (item.url_type == 'goods_list') {
						let category_id = item.params.category_id.category_id
						uni.navigateTo({
							url: '/subpkg/goodsSecondLevel/goodsSecondLevel?id=' + category_id
						})
					}
				}
			},
			//填写手机号
			mobileBtn() {
				this.$api.bindMobile({
					mobile: this.mobile,
					loginpass: this.loginpass
				}).then(res => {
					console.log(res)
					this.$msg(res.msg)
					this.showtell = false
					uni.setStorageSync('token', res.data.token.access_token)
					this.getInit()
				})
			}
		},
		onReachBottom() {
			if (this.surplus == 0) {
				this.$msg('没有更多数据')
				return
			}
			this.likeQuery.page++
			this.getLikegoods()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.topbg {
		background: #D23030;

	}

	.topbox {
		background: #D23030;

		view {
			font-size: 30rpx;
			color: #FFFFFF;
		}


	}

	.titbox {
		border-top: 2rpx solid #F5F5F5;
		box-shadow: 0px 0px 10rpx 2rpx rgba(51, 51, 51, 0.04);

		text {
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
		}

		.moretxt {
			color: #999999;
		}
	}

	.fourimagebox {
		width: 172rpx;
	}

	.fourimagebox:nth-child(4n+0) {
		margin-right: 0 !important;
	}

	.biaoshi {
		background-color: #F66F58;
	}

	.fengeline {
		height: 1rpx;
		border-bottom: 2rpx solid #C0C0C0;
	}

	.search {
		.searchbox {
			position: relative;
			height: 68rpx;
			background: #E89797;
			border-radius: 34rpx;
			// text-align: center;
			line-height: 68rpx;
			width: 100%;

			.searchIcon {
				position: absolute;
				top: 50%;
				left: 40rpx;
				transform: translateY(-50%);
			}

			text {
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}

	.selbox {
		z-index: 999;
	}

	.picList3:nth-child(2n+0) {
		margin-right: 0 !important;
	}

	.picList4 {
		width: 100%;
	}

	// .picList4:nth-child(odd) {
	// 	width: 210rpx;
	// 	margin-right: 20rpx;
	// }
	// .picList4:nth-child(even) {
	// 	width: 520rpx;
	// }
	.picList5:nth-child(2n+0) {
		margin-right: 0 !important;
	}
</style>
